<template>
    <div ref="container" class="carousel-itme-container" @mousemove="handelMouseMove"
    @mouseleave="hadelMouseLeave">
        <div ref="image" class="carousel-img" :style="imagePosition">
            <ImageLoader @load="this.showWords" :src="carousel.bigImg" :placeholder="carousel.midImg" />
        </div>
        <div ref="title" class="title">{{ carousel.title }}</div>
        <div ref="desc" class="desc">{{ carousel.description }}</div>
    </div>
</template>

<script>
import ImageLoader from '@/components/ImageLoader';
import { showMessage } from '@/utils';
export default {
    components: {
        ImageLoader,
    },
    data() {
        return {
            titleWidth: 0,
            descWidth: 0,
            containerSize: null, // 外层容器尺寸
            innerSize: null, // 里层图片尺寸
            mouseX: 0,
            mouseY: 0,
        }
    },
    computed: {
        center() {
            return {
                x: this.containerSize.width / 2,
                y: this.containerSize.height / 2,
            }
        },
        // 得到图片坐标
        imagePosition() {
            if (!this.innerSize || !this.containerSize) {
                return
            }
            const extraWidth = this.innerSize.width - this.containerSize.width;
            const extraHeight = this.innerSize.height - this.containerSize.height;
            const left = -extraWidth / this.containerSize.width * this.mouseX;
            const top = -extraHeight / this.containerSize.height * this.mouseY;
            return {
                transform: `translate(${left}px,${top}px)`,
            }
        }
    },
    props: ['carousel'],
    mounted() {
        // 标题和描述文字宽度
        this.titleWidth = this.$refs.title.clientWidth;
        this.descWidth = this.$refs.desc.clientWidth;
        this.setSize();
        this.mouseX = this.center.x;
        this.mouseY = this.center.y;
        window.addEventListener('resize', this.setSize);
    },
    destroyed() {
        window.removeEventListener('resize', this.setSize);
    },
    methods: {
        hadelMouseLeave(){
            this.mouseX = this.center.x;
            this.mouseY = this.center.y;
        },
        handelMouseMove(e) {
            const rect = this.$refs.container.getBoundingClientRect();
            this.mouseX = e.clientX - rect.left;
            this.mouseY = e.clientY - rect.top;
        },
        setSize() {
            // 容器宽高
            this.containerSize = {
                width: this.$refs.container.clientWidth,
                height: this.$refs.container.clientHeight,
            };
            // 图片宽高
            this.innerSize = {
                width: this.$refs.image.clientWidth,
                height: this.$refs.image.clientHeight,
            };
        },
        // 调用该方法显示文字
        showWords() {
            // 标题
            const title = this.$refs.title;
            const desc = this.$refs.desc;
            title.style.opacity = 1;
            title.style.width = 0;
            this.$refs.title.clientHeight;
            title.style.transition = '1s';
            title.style.width = this.titleWidth + 'px';
            // 描述同上
            desc.style.opacity = 1;
            desc.style.width = 0;
            this.$refs.desc.clientHeight;
            desc.style.transition = '2s 1s';
            desc.style.width = this.descWidth + 'px';
        }
    }
}
</script>

<style lang="less" scoped>
@import url(~@/styles/mixin.less);
@import url(~@/styles/var.less);

.carousel-itme-container {
    // background: @dark;
    .fill();
    color: @f;
    position: relative;
    overflow: hidden;

    .carousel-img {
        width: 110%;
        height: 110%;
        position: absolute;
        transition: .3s;
        left: 0;
        top: 0;
    }

    .desc,
    .title {
        position: absolute;
        left: 30px;
        letter-spacing: 6px;
        color: @f;
        text-shadow: 1px 0 0 rgba(0, 0, 0, .5), -1px 0 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(0, 0, 0, .5), 0 -1px 0 rgba(0, 0, 0, .5);
        white-space: nowrap;
        overflow: hidden;
        opacity: 0;
    }

    .title {
        top: calc(50% - 40px);
        font-size: 2em;
    }

    .desc {
        top: calc(50% + 25px);
        font-size: 1.2em;
        color: lighten(@gray, 15%);
    }
}
</style>